<template>
  <div class="search">
    <div  class="box">
      <!-- 搜索框 -->
      <van-search
        v-model="keyword"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
      <!-- 下拉菜单组件 -->
      <Dropmenu
        :filterCategory="filterCategory"
        @dropmen="chengefn"
        @transfer="changeKindFn"
      ></Dropmenu>
      <!-- 商品列表组件 -->
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <GoosListVue :goodsList="goodsList"></GoosListVue>
    </van-list>
  </div>
</template>
<script>
// 引入下拉菜单组件
import Dropmenu from "@/components/Dropmenu.vue";
// 引入搜索页接口
import { searchgoods } from "@/utils/https";
// 引入商品列表组件
import GoosListVue from "@/components/GoosList.vue";
export default {
  name: "search",
  data() {
    return {
      keyword: "", //搜索的关键字
      page: 1, //默认页数
      size: 10, //每页条数
      order: "desc", //价格排序 desc 由高到低  asc 由低到高
      categoryId: 0, //商品分类id
      sort: "id", //排序方式  根据分类id或价格
      goodsList: [], //商品列表数据
      filterCategory: [], //所有的分类名称

      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  components: {
    Dropmenu, //下来菜单组件
    GoosListVue, //商品列表组件
  },
  methods: {
    getdata() {
      let params = {
        keyword: this.keyword, //搜索的关键字
        page: this.page, //默认页数
        size: this.size, //每页条数
        order: this.order, //价格排序 desc 由高到低  asc 由低到高
        categoryId: this.categoryId, //商品分类id
        sort: this.sort, //排序方式  根据分类id或价格
      };
      searchgoods(params)
        .then((res) => {
          console.log(res);
          this.goodsList = res.data.data.goodsList;
          this.filterCategory = res.data.data.filterCategory;
          this.filterCategory = JSON.parse(
            JSON.stringify(this.filterCategory)
              .replace(/name/g, "text")
              .replace(/id/g, "value")
          );
        })
        .catch((res) => {
          console.log(res);
        });
    },
    onLoad() {
      // this.page++;
      // this.getdata();
      // this.finished && clearTimeout(timer);
    },

    onSearch() {
      // 点击搜索事件
      this.getdata();
    },
    onCancel() {
      // 点击取消事件
      this.$router.go(-1);
    },

    chengefn(m) {
      // 切换价格数据
      this.order = m;
      this.sort = "price";
      // 修改完参数,重新渲染
      this.getdata();
    },
    changeKindFn(n) {
      this.categoryId = n;
      this.sort = "id";
      // 根据修改完的参数,重新获取数据
      this.getdata();
    },
  },
  created() {
    this.getdata();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.box {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: white;
}
</style>
